/* eslint-disable @typescript-eslint/camelcase */
/* eslint-disable consistent-return */
/* eslint-disable max-len */
/**
 * Created by zhangsong on 2019-05-08.
 */
import PDFPreview from '@/components/PDFPreview';
import Power from '@/constants/power';
import { StaffApplication } from '@/constants/routes';
import Authorized from '@/utils/Authorized';
import CreatableSelect from 'react-select/creatable';
import React, { Component } from 'react';
import {
  Form,
  Input,
  Radio,
  Tooltip,
  Icon,
  Button,
  Upload,
  Spin,
  Modal,
  Checkbox,
  DatePicker,
  Select,
  message,
  Table
} from 'antd';
import { formatMessage, FormattedMessage, getLocale } from '@/utils/i18n';
import { connect } from 'dva';
import moment from 'moment';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import StaffReducer from '@/dva/application/staff';
import UserReducer from '@/dva/user';
import { getBase64, searchToMap } from '@/utils/utils';
import Style from './index.module.scss';
import { checkHkid } from '@/utils/checkhkid'
import Modals from '@/components/Modal';

const { Namespace, Effects, Reducers } = StaffReducer;

@connect(
  state => ({
    staffStore: state[Namespace],
    userStore: state[UserReducer.Namespace],
  }),
  dispatch => ({
    getById: id =>
      dispatch({
        type: `${Namespace}/${Effects.getStaffById}`,
        data: id,
      }),
    handleSubmit: data =>
      dispatch({
        type: `${Namespace}/${Effects.modifyStaffById}`,
        data,
      }),
    handleReset: data =>
      dispatch({
        type: `${Namespace}/${Effects.getStaffById}`,
        data,
      }),
    handPDFModalCancel: data =>
      dispatch({
        type: `${Namespace}/${Effects.handPDFModalCancel}`,
        data,
      }),
    handleSaveModalOk() {
      dispatch({
        type: `${Namespace}/${Reducers.setState}`,
        data: {
          saveSuccessModal: false,
          pdfPreviewVisible: true,
        },
      });
    },
    saveModalCancel() {
      dispatch({
        type: `${Namespace}/${Reducers.setState}`,
        data: {
          saveSuccessModal: false,
        },
      });
    },
    getGroupList() {
      dispatch({
        type: `${Namespace}/${Effects.getGroupList}`,
      });
    },
    creatGroupList: data => {
      dispatch({
        type: `${Namespace}/${Effects.creatGroupList}`,
        data,
      });
    },
  }),
)
@Form.create()
class Index extends Component {
  constructor(props) {
    super(props);
    const { search } = props.location;
    const obj = searchToMap(search);
    this.state = {
      id: obj.id,
      previewVisible: false,
      previewImage: '',
      uploadPdfPreviewVisible: false,
      pdfUploadReview: '',
      grouplist: [],
    };
  }

  componentDidMount() {
    const { id } = this.state;
    const { getById, getGroupList } = this.props;
    getById(id);
    getGroupList();
  }

  // 显示头像预览
  handlePhotographPreview = async file => {
    if (file.url && file.url.endsWith('.pdf')) {
      this.setState({
        uploadPdfPreviewVisible: true,
        pdfUploadReview: file.url,
      });
      return;
    }
    if (file.type === 'application/pdf') {
      if (file.url) {
        this.setState({
          uploadPdfPreviewVisible: true,
          pdfUploadReview: file.url,
        });
      } else {
        Modal.info({ title: formatMessage('applicationContractor.tips.noSupportedPDF') });
      }
      return;
    }
    if (!file.url) {
      if (file.response) {
        file.thumbUrl = file.response;
      } else {
        file.thumbUrl = await getBase64(file.originFileObj);
      }
    }

    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };

  handlePhotographClose = () => {
    this.setState({
      previewImage: '',
      previewVisible: false,
    });
  };

  handleReset = () => {
    const { form } = this.props;
    form.resetFields();
  };

  setHeadPhoto = async list => {
    let i = 0;
    if (Array.isArray(list)) {
      for (i = 0; i < list.length; i += 1) {
        if (!list[i].url) {
          if (list[i].response) {
            list[i].thumbUrl = list[i].response;
          } else if (!list[i].thumbUrl) {
            // eslint-disable-next-line no-await-in-loop
            list[i].thumbUrl = await getBase64(list[i].originFileObj);
          }
        }
      }
    }
    return list;
  }

  handleSubmit = e => {
    e.preventDefault();
    const { form, handleSubmit, staffStore, userStore } = this.props;
    const { id } = this.state;
    form.validateFieldsAndScroll(async (err, values) => {
      if (!err) {
        const { staffInfo } = staffStore;
        const {
          headPhoto,
          annexes,
          zoneRequired = [],
          zoneSpecified = [],
          workerCardNo1,
          workerCardExpiredDate1,
          id_base64,
          green_base64,
          drive_base64,
          regist_base64,
          vacc_base64,
          exemption_base64,
          idCardNo
        } = values;
        // if (!checkHkid(idCardNo)) {
        //   return Modals.tips(formatMessage('applicationContractor.columns.identityCard.rez'));
        // }
        const { area } = userStore;
        if (
          (workerCardNo1 && !workerCardExpiredDate1) ||
          (!workerCardNo1 && workerCardExpiredDate1)
        ) {
          return message.error(formatMessage('applicationContractor.columns.greencard'));
        }
        const areaObj = area.reduce((prev, next) => {
          prev[next.id] = next;
          return prev;
        }, {});
        zoneRequired.sort((a, b) => Number(a) - Number(b));
        zoneSpecified.sort((a, b) => Number(a) - Number(b));
        const zoneRequiredList = zoneRequired.map(item => areaObj[item]);
        const zoneSpecifiedList = zoneSpecified.map(item => areaObj[item]);
        let i = 0;
        for (i = 0; i < headPhoto.length; i += 1) {
          if (!headPhoto[i].url) {
            if (headPhoto[i].response) {
              headPhoto[i].thumbUrl = headPhoto[i].response;
            } else if (!headPhoto[i].thumbUrl) {
              // eslint-disable-next-line no-await-in-loop
              // console
              headPhoto[i].thumbUrl = await getBase64(headPhoto[i].originFileObj);
            }
          }
        }
        let annexeList = annexes;
        if (!annexeList) {
          annexeList = [];
        }
        for (i = 0; i < annexeList.length; i += 1) {
          if (!annexeList[i].url) {
            if (annexeList[i].response) {
              annexeList[i].thumbUrl = annexeList[i].response;
            } else if (!annexeList[i].thumbUrl) {
              // eslint-disable-next-line no-await-in-loop
              annexeList[i].thumbUrl = await getBase64(annexeList[i].originFileObj);
            }
          }
        }
        handleSubmit({
          body: {
            ...values,
            cardNo: staffInfo.cardNo,
            fileGroupId: staffInfo.fileGroupId,
            cardGroupId: staffInfo.cardGroupId,
            cardBack: staffInfo.cardBack,
            cardFront: staffInfo.cardFront,
            annexes: annexeList,
            headPhoto: await this.setHeadPhoto(headPhoto),
            id_base64: await this.setHeadPhoto(id_base64),
            drive_base64: await this.setHeadPhoto(drive_base64),
            regist_base64: await this.setHeadPhoto(regist_base64),
            vacc_base64: await this.setHeadPhoto(vacc_base64),
            green_base64: await this.setHeadPhoto(green_base64),
            exemption_base64: await this.setHeadPhoto(exemption_base64),
            zoneRequired: zoneRequiredList,
            zoneSpecified: zoneSpecifiedList,
          },
          id,
          page: staffStore.page,
          pageSize: staffStore.pageSize,
          query: staffStore.query,
        });
      }
    });
  };

  handleSaveModalCancel = () => {
    const { history, saveModalCancel } = this.props;
    saveModalCancel();
    history.push(StaffApplication.list.url);
  };

  handlePDFOk = () => {
    const { handPDFModalCancel, history } = this.props;
    handPDFModalCancel();
    history.push(StaffApplication.list.url);
  };

  handlePDFCancel = () => {
    const { handPDFModalCancel, history } = this.props;
    handPDFModalCancel();
    history.push(StaffApplication.list.url);
  };

  handleUploadPDFOk = () => {
    this.setState({
      uploadPdfPreviewVisible: false,
      pdfUploadReview: '',
    });
  };

  handleUploadPDFCancel = () => {
    this.setState({
      uploadPdfPreviewVisible: false,
      pdfUploadReview: '',
    });
  };

  normFile = e => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  // 添加的时候
  onCreateOption = str => {
    const { form, creatGroupList, staffStore } = this.props;
    const { staffInfo } = this.props.staffStore;
    const { grouplist } = this.state;
    const lists = grouplist
    lists.push({ value: str, label: str })
    const newlist = staffInfo.listName.concat(lists);
    this.setState({
      grouplist: lists,
    })
    form.setFieldsValue({
      groupName: newlist,
    })
    const data = [str];
    console.log('onCreateOption', staffStore)
    creatGroupList(data)
  }

  onChangeselete = str => {
    const { form } = this.props;
    this.setState({
      grouplist: str,
    })
    form.setFieldsValue({
      groupname: str,
    })
    console.log('onChangeselete', str)
  }

  renderColumns = () => [
    {
      title: formatMessage({ id: 'baseInfo.actionpeople' }),
      dataIndex: 'operate_user',
    },
    {
      title: formatMessage({ id: 'baseInfo.actionstate' }),
      dataIndex: 'operate_status',
      render: (text, record, index) => {
        console.log('operate_status', text, record, index)
        let status = '';
        switch (text) {
          case 0:
            status = formatMessage('baseInfo.needApprovalStatus')
            break;
          case 1:
            status = formatMessage('applicationStaff.columns.checkedApproved.approved')
            break;
          case -1:
            status = formatMessage('applicationStaff.columns.checkedApproved.disapproved')
            break;
          case 2:
            status = formatMessage('baseInfo.review')
            break;
          default:
            status = ''
            break;
        }
        return (
          <div>
            {status}
          </div>
        );
      },
    },
    {
      title: formatMessage({ id: 'baseInfo.actiondate' }),
      dataIndex: 'operate_date',
    },
  ]

  render() {
    const { form, staffStore, userStore = {}, handleSaveModalOk } = this.props;
    const { getFieldDecorator } = form;
    const { previewVisible, previewImage, uploadPdfPreviewVisible, pdfUploadReview, grouplist } = this.state;

    const {
      saveLoading,
      staffInfo = {},
      pdfPreviewVisible,
      pdfReview,
      saveSuccessModal,
      groupList,
    } = staffStore;
    const { area, workerType, currentUser } = userStore;
    let headPhotoUpload = false;
    const headPhoto = form.getFieldValue('headPhoto');
    if (Array.isArray(headPhoto) && headPhoto.length === 0) {
      headPhotoUpload = true;
    }
    if (headPhoto === undefined) {
      if (staffInfo.headPhoto) {
        if (staffInfo.headPhoto.length < 1) {
          headPhotoUpload = true;
        }
      }
    }
    let annexesUpload = true;
    const annexes = form.getFieldValue('annexes');
    if (Array.isArray(annexes) && annexes.length > 10) {
      annexesUpload = false;
    }
    const zoneTips = Array.isArray(area) ? (
      <div className={Style.zoneTipsWrapper}>
        {area.map(item => (
          <div
            key={item.id + (getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh)}
            className={Style.zoneTipsRow}
          >
            <div className={Style.zoneTipsLabel}>{item.areaCode}</div>
            <div>=</div>
            <div>{getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh}</div>
          </div>
        ))}
      </div>
    ) : null;

    return (
      <PageHeaderWrapper>
        <Spin spinning={!!saveLoading} size="large">
          <div className={`${Style.body}`}>
            <div className={Style.excelTitle}>
              <h1>AIRPORT AUTHORITY HONG KONG</h1>
              <h1>SECURITY PASS FOR PERMANENT STAFF</h1>
            </div>
            <Modal
              visible={previewVisible}
              footer={null}
              maskClosable
              onCancel={() => {
                this.handlePhotographClose();
              }}
            >
              <img alt="example" style={{ width: '100%' }} src={previewImage} />
            </Modal>
            <Modal
              visible={saveSuccessModal}
              title={formatMessage('baseInfo.saveSuccess')}
              okText={formatMessage('baseInfo.previewPDF')}
              cancelText={formatMessage('baseInfo.goToList')}
              onOk={() => handleSaveModalOk()}
              onCancel={() => this.handleSaveModalCancel()}
              footer={[
                <Button onClick={() => this.handleSaveModalCancel()}>
                  {formatMessage('baseInfo.goToList')}
                </Button>,
              ]}
            >
              <p>{formatMessage('applicationCommon.workerCard.pdfmessage')}</p>
            </Modal>
            <PDFPreview
              visible={pdfPreviewVisible}
              url={pdfReview}
              onOk={this.handlePDFOk}
              onCancel={this.handlePDFCancel}
              printing={Authorized.check(Power.StaffApplication.printing, true, false)}
            />
            <PDFPreview
              visible={uploadPdfPreviewVisible}
              url={pdfUploadReview}
              onOk={this.handleUploadPDFOk}
              onCancel={this.handleUploadPDFCancel}
              printing={false}
            />
            <Form labelAlign="right" onSubmit={this.handleSubmit}>
              <div className={`${Style.part} ${Style.partA}`}>
                <div className={Style.title}>
                  <strong className={Style.font16}>PART A</strong>
                  {/* eslint-disable-next-line react/no-unescaped-entities */}
                  <span>Applicant's Particulars</span>
                  <i>(to be completed by Applicant)</i>
                </div>
                <div className={Style.detail}>
                  <div className={Style.headerImageWrapper}>
                    <Form.Item>
                      {getFieldDecorator('headPhoto', {
                        valuePropName: 'fileList',
                        getValueFromEvent: this.normFile,
                        initialValue: staffInfo.headPhoto,
                        rules: [
                          {
                            required: true,
                            message: formatMessage('applicationStaff.columns.headPhoto.errMessage'),
                          },
                        ],
                      })(
                        <Upload
                          name="headPhoto"
                          listType="picture-card"
                          accept="image/*"
                          className="avatar-uploader"
                          customRequest={async ({ file, onSuccess }) => {
                            const base64 = await new Promise(resolve => {
                              const fileReader = new FileReader();
                              fileReader.readAsDataURL(file);
                              fileReader.onload = () => {
                                resolve(fileReader.result);
                              };
                            });
                            onSuccess(base64);
                            return {
                              abort() { },
                            };
                          }}
                          onPreview={this.handlePhotographPreview}
                          showUploadList
                        >
                          {headPhotoUpload ? (
                            <div>
                              <div className="ant-upload-text">
                                <Icon type="plus" />
                                {formatMessage({
                                  id: 'applicationStaff.columns.headPhoto.name',
                                })}
                              </div>
                            </div>
                          ) : null}
                        </Upload>,
                      )}
                    </Form.Item>
                  </div>
                  <div className={Style.fieldWrapper}>
                    <Form.Item label={formatMessage('applicationStaff.columns.surname.name')}>
                      {getFieldDecorator('surname', {
                        initialValue: staffInfo.surname,
                        rules: [
                          {
                            required: true,
                            message: formatMessage('applicationStaff.columns.surname.errMessage'),
                          },
                        ],
                      })(<Input maxLength={100} />)}
                    </Form.Item>
                    <Form.Item
                      label={formatMessage('applicationContractor.columns.nameAlias.name')}
                    >
                      {getFieldDecorator('alias', {
                        initialValue: staffInfo.alias,
                      })(<Input maxLength={100} />)}
                    </Form.Item>
                    <Form.Item label={formatMessage('applicationStaff.columns.otherName.name')}>
                      {getFieldDecorator('otherName', {
                        initialValue: staffInfo.otherName,
                      })(<Input maxLength={100} />)}
                    </Form.Item>
                    <Form.Item label={formatMessage('applicationStaff.columns.idCardNo.name')}>
                      {getFieldDecorator('idCardNo', {
                        initialValue: staffInfo.idCardNo,
                        rules: [
                          {
                            required: true,
                            message: formatMessage('applicationStaff.columns.idCardNo.errMessage'),
                          },
                          // {
                          //   pattern: '^[A-Z]{1,2}[0-9]{6}\\(?[0-9A]\\)?$',
                          //   message: formatMessage(
                          //     'applicationContractor.columns.identityCard.rez',
                          //   ),
                          // },
                        ],
                      })(<Input maxLength={100} />)}
                    </Form.Item>
                    <Form.Item
                      label={formatMessage('applicationStaff.columns.annexes.name')}
                    // extra="表格扫描文件"
                    >
                      {getFieldDecorator('id_base64', {
                        initialValue: staffInfo.id_base64,
                        valuePropName: 'fileList',
                        getValueFromEvent: this.normFile,
                      })(
                        <Upload
                          accept=".pdf,image/*"
                          customRequest={async ({ file, onSuccess }) => {
                            const base64 = await new Promise(resolve => {
                              const fileReader = new FileReader();
                              fileReader.readAsDataURL(file);
                              fileReader.onload = () => {
                                resolve(fileReader.result);
                              };
                            });
                            onSuccess(base64);
                            return {
                              abort() { },
                            };
                          }}
                          listType="picture"
                          onPreview={this.handlePhotographPreview}
                        >
                          {annexesUpload ? (
                            <Button>
                              <Icon type="upload" />
                              {formatMessage('applicationStaff.columns.annexes.button')}
                            </Button>
                          ) : null}
                        </Upload>,
                      )}
                    </Form.Item>
                    <Form.Item label={formatMessage('applicationStaff.columns.staffNo.name')}>
                      {getFieldDecorator('staffNo', {
                        initialValue: staffInfo.staffNo,
                        rules: [
                          {
                            required: true,
                            message: formatMessage('applicationStaff.columns.staffNo.errMessage'),
                          },
                        ],
                      })(<Input maxLength={100} />)}
                    </Form.Item>
                    <Form.Item label={formatMessage('applicationStaff.columns.position.name')}>
                      {getFieldDecorator('position', {
                        initialValue: staffInfo.position,
                        rules: [
                          {
                            required: true,
                            message: formatMessage('applicationStaff.columns.position.errMessage'),
                          },
                        ],
                      })(<Input maxLength={100} />)}
                    </Form.Item>
                    <Form.Item label={formatMessage('applicationStaff.columns.division.name')}>
                      {getFieldDecorator('division', {
                        initialValue: staffInfo.division,
                        rules: [
                          {
                            required: true,
                            message: formatMessage('applicationStaff.columns.division.errMessage'),
                          },
                        ],
                      })(<Input maxLength={100} />)}
                    </Form.Item>
                    <Form.Item label={formatMessage('applicationStaff.columns.department.name')}>
                      {getFieldDecorator('department', {
                        initialValue: staffInfo.department,
                        rules: [
                          {
                            required: true,
                            message: formatMessage(
                              'applicationStaff.columns.department.errMessage',
                            ),
                          },
                        ],
                      })(<Input maxLength={100} />)}
                    </Form.Item>
                    <Form.Item
                      label={formatMessage('applicationContractor.columns.telephone.name')}
                    >
                      {getFieldDecorator('telephone', {
                        initialValue: staffInfo.telephone,
                        rules: [
                          {
                            required: true,
                            message: formatMessage(
                              'applicationContractor.columns.telephone.errMessage',
                            ),
                          },

                          {
                            pattern: '^[0-9]{8,8}$',
                            message: formatMessage(
                              'applicationContractor.columns.emergencyContactedName.rez',
                            ),
                          },
                        ],
                      })(<Input maxLength={50} />)}
                    </Form.Item>
                  </div>
                </div>
              </div>
              <div className={Style.part}>
                <div className={Style.title}>
                  <strong className={Style.font16}>PART B</strong>
                  <i>(to be completed by the Division / Department Head concerned)</i>
                </div>
                <div className={Style.detail}>
                  <div>
                    {/* eslint-disable-next-line max-len */}
                    To : Security Manager
                    <br />
                    The Applicant is entitled to enter the following zone(s) :
                  </div>
                  <Form.Item
                    label={
                      <span>
                        {formatMessage('applicationStaff.columns.zoneRequired.name')}
                        &nbsp;
                        <Tooltip title={zoneTips}>
                          <Icon type="question-circle-o" />
                        </Tooltip>
                      </span>
                    }
                  >
                    {area == null ? (
                      <Spin spinning />
                    ) : (
                      getFieldDecorator('zoneRequired', {
                        initialValue: staffInfo.zoneRequired,
                        rules: [
                          {
                            required: true,
                            message: formatMessage(
                              'applicationStaff.columns.zoneRequired.errMessage',
                            ),
                          },
                        ],
                      })(
                        <Checkbox.Group name="zoneRequired">
                          {area.map(item => (
                            <Checkbox key={item.id} value={item.id} disabled={item.status !== 1}>
                              {item.areaCode}
                            </Checkbox>
                          ))}
                        </Checkbox.Group>,
                      )
                    )}
                  </Form.Item>
                  <Form.Item
                    label={formatMessage('applicationStaff.columns.contractApplicantDrive.name')}
                  >
                    {getFieldDecorator('needDriving', {
                      initialValue: staffInfo.needDriving,
                      rules: [
                        {
                          required: true,
                          message: formatMessage('baseInfo.placeholderChecked'),
                        },
                      ],
                    })(
                      <Radio.Group>
                        <Radio value={1}>
                          <FormattedMessage id="applicationStaff.columns.contractApplicantDrive.applicant" />
                        </Radio>
                        <Radio value={0}>
                          <FormattedMessage id="applicationStaff.columns.contractApplicantDrive.disApplicant" />
                        </Radio>
                      </Radio.Group>,
                    )}
                  </Form.Item>
                  <div>
                    <Form.Item
                      label={formatMessage('applicationContractor.columns.contractTo.name')}
                    >
                      {getFieldDecorator('projectExpire', {
                        initialValue: staffInfo.projectExpire
                          ? moment(staffInfo.projectExpire)
                          : null,
                        rules: [
                          {
                            required: false,
                            message: formatMessage(
                              'applicationContractor.columns.contractTo.errMessage',
                            ),
                          },
                        ],
                      })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                    </Form.Item>
                  </div>
                  <Form.Item
                    label={formatMessage('applicationStaff.columns.annexes.name')}
                  // extra="表格扫描文件"
                  >
                    {getFieldDecorator('drive_base64', {
                      initialValue: staffInfo.drive_base64,
                      valuePropName: 'fileList',
                      getValueFromEvent: this.normFile,
                    })(
                      <Upload
                        accept=".pdf,image/*"
                        customRequest={async ({ file, onSuccess }) => {
                          const base64 = await new Promise(resolve => {
                            const fileReader = new FileReader();
                            fileReader.readAsDataURL(file);
                            fileReader.onload = () => {
                              resolve(fileReader.result);
                            };
                          });
                          onSuccess(base64);
                          return {
                            abort() { },
                          };
                        }}
                        listType="picture"
                        onPreview={this.handlePhotographPreview}
                      >
                        {annexesUpload ? (
                          <Button>
                            <Icon type="upload" />
                            {formatMessage('applicationStaff.columns.annexes.button')}
                          </Button>
                        ) : null}
                      </Upload>,
                    )}
                  </Form.Item>
                  <Form.Item
                    label={formatMessage('applicationStaff.columns.drivingLicenseExpire.name')}
                  >
                    {getFieldDecorator('drivingLicenseExpire', {
                      initialValue: staffInfo.drivingLicenseExpire
                        ? moment(staffInfo.drivingLicenseExpire)
                        : null,
                    })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                  </Form.Item>
                  <Form.Item label={formatMessage('applicationStaff.columns.staffVehicle.name')}>
                    {getFieldDecorator('staffVehicle', {
                      initialValue: staffInfo.staffVehicle,
                    })(<Input maxLength={50} />)}
                  </Form.Item>
                </div>
              </div>
              <div className={Style.part}>
                <div className={Style.title}>
                  <strong className={Style.font16}>PART C</strong>
                  <i>(to be completed by Security Control Office )</i>
                </div>
                <div className={Style.detail}>
                  <div>
                    {/* eslint-disable-next-line max-len */}
                    The above staff has / has not * attended a Site Orientation Course held by
                    Construction
                    <br />
                    Support Department. (Note : No Security Passes giving access to the Project Site
                    <br />
                    will be issued until the prospective bearer has attended such Course.)
                  </div>
                  {
                    currentUser.role_id === '110' ? null :
                      <Form.Item label={formatMessage('applicationStaff.columns.checkedApproved.name')}>
                        {getFieldDecorator('checkedApproved', {
                          initialValue: staffInfo.checkedApproved,
                        })(
                          <Radio.Group>
                            <Radio value={1}>
                              <FormattedMessage id="applicationStaff.columns.checkedApproved.approved" />
                            </Radio>
                            <Radio value={-1}>
                              <FormattedMessage id="applicationStaff.columns.checkedApproved.disapproved" />
                            </Radio>
                            {
                              currentUser.role_id === '100' ? (
                                <Radio value={3}>
                                  <FormattedMessage id="applicationContractor.temporary.cancelled" />
                                </Radio>
                              ) : null
                            }
                            <Radio value={0}>
                              <FormattedMessage id="baseInfo.needApprovalStatus" />
                            </Radio>
                          </Radio.Group>,
                        )}
                      </Form.Item>
                  }
                  <Form.Item label={formatMessage('applicationStaff.columns.expiredDate.name')}>
                    {getFieldDecorator('expiredDate', {
                      initialValue: staffInfo.expiredDate ? moment(staffInfo.expiredDate) : null,
                      rules: [
                        {
                          required: true,
                          message: formatMessage('applicationStaff.columns.expiredDate.errMessage'),
                        },
                      ],
                    })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                  </Form.Item>
                  <Form.Item
                    label={
                      <span>
                        {formatMessage('applicationStaff.columns.zoneSpecified.name')}
                        &nbsp;
                        <Tooltip title={zoneTips}>
                          <Icon type="question-circle-o" />
                        </Tooltip>
                      </span>
                    }
                  >
                    {area == null ? (
                      <Spin spinning />
                    ) : (
                      getFieldDecorator('zoneSpecified', {
                        initialValue: staffInfo.zoneSpecified,
                        rules: [
                          {
                            required: true,
                            message: formatMessage(
                              'applicationStaff.columns.zoneSpecified.errMessage',
                            ),
                          },
                        ],
                      })(
                        <Checkbox.Group name="zoneSpecified">
                          {area.map(item => (
                            <Checkbox key={item.id} value={item.id} disabled={item.status !== 1}>
                              {item.areaCode}
                            </Checkbox>
                          ))}
                        </Checkbox.Group>,
                      )
                    )}
                  </Form.Item>
                  <Form.Item label={formatMessage('applicationStaff.columns.reasons.name')}>
                    {getFieldDecorator('reasons', {
                      initialValue: staffInfo.reasons,
                      rules: [
                        {
                          // required: true,
                          message: formatMessage('applicationStaff.columns.reasons.errMessage'),
                        },
                      ],
                    })(
                      <Input.TextArea
                        autosize={{
                          minRows: 2,
                          maxRows: 6,
                        }}
                        maxLength={1000}
                      />,
                    )}
                  </Form.Item>
                </div>
              </div>
              <div className={Style.part}>
                <div className={Style.title}>
                  <strong className={Style.font16}>PART D</strong>
                  <i>(to be completed by the staff concerned)</i>
                </div>
                <div className={Style.detail}>
                  <Form.Item label={formatMessage('applicationStaff.columns.passNumber.name')}>
                    {getFieldDecorator('passNumber', {
                      initialValue: staffInfo.passNumber,
                    })(<Input maxLength={100} />)}
                  </Form.Item>
                </div>
              </div>
              <Form.Item
                label={formatMessage('applicationStaff.columns.annexes.name')}
              // extra="表格扫描文件"
              >
                {getFieldDecorator('annexes', {
                  initialValue: staffInfo.annexes,
                  valuePropName: 'fileList',
                  getValueFromEvent: this.normFile,
                })(
                  <Upload
                    accept=".pdf,image/*"
                    customRequest={async ({ file, onSuccess }) => {
                      const base64 = await new Promise(resolve => {
                        const fileReader = new FileReader();
                        fileReader.readAsDataURL(file);
                        fileReader.onload = () => {
                          resolve(fileReader.result);
                        };
                      });
                      onSuccess(base64);
                      return {
                        abort() { },
                      };
                    }}
                    listType="picture"
                    onPreview={this.handlePhotographPreview}
                  >
                    {annexesUpload ? (
                      <Button>
                        <Icon type="upload" />
                        {formatMessage('applicationStaff.columns.annexes.button')}
                      </Button>
                    ) : null}
                  </Upload>,
                )}
              </Form.Item>

              <Form.Item
                label={formatMessage('applicationContractor.columns.annexes.groupname')}
              >
                {getFieldDecorator('groupName', {
                  initialValue: staffInfo.listName,
                  rules: [
                    {
                      required: false,
                      message: formatMessage(
                        'applicationCommon.workerCard.name.errMessage',
                      ),
                    },
                  ],
                })(
                  <CreatableSelect styles={{
                    menu: base => ({
                      ...base,
                      zIndex: 10,
                    }),
                    control: base => ({
                      ...base,
                      height: '35px !important',
                    }),
                    input: base => ({
                      ...base,
                      height: '35px !important',
                      // backgroundColor: 'pink',
                    }),
                    multiValue: base => ({
                      ...base,
                      // backgroundColor: 'pink',
                      height: '25px !important',
                      display: 'flex',
                      alignItems: 'center',
                    }),
                    valueContainer: base => ({
                      ...base,
                      height: '35px !important',
                    }),
                  }}
                    isMulti
                    onCreateOption={this.onCreateOption}
                    onChange={this.onChangeselete}
                    options={groupList}
                    value={grouplist}
                    placeholder={formatMessage('baseInfo.placeholderChecked')}
                  />,
                  //   <Select
                  //   dropdownRender={menu => (
                  //     <>
                  //       {menu}
                  //       <div>
                  //         <a style={{ padding: 10 }}>{formatMessage(
                  //           'applicationContractor.columns.annexes.creatgroupname',
                  //         )}</a>
                  //       </div>
                  //     </>
                  //   )}
                  //   mode="multiple"
                  //   allowClear
                  //   style={{ width: '50%' }}
                  //   placeholder={formatMessage('baseInfo.placeholderChecked')}
                  //   onChange={this.handleChange}
                  // >
                  //   {this.childrenGroup(groupList)}
                  //   </Select>
                )}
              </Form.Item>

              <div className={`${Style.part} ${Style.partA}`} style={{ marginTop: 30 }}>
                <div className={Style.title}>
                  <strong>Card</strong>
                </div>
                <div className={Style.main}>
                  <div className={Style.detailWrapper}>
                    <div className={Style.table}>
                      {/* 绿卡 */}
                      <div className={`${Style.row} ${Style.rowTitle}`}>
                        <FormattedMessage id="applicationCommon.workerCard.greenCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName1', {
                              initialValue: staffInfo.workerCardName1,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo1', {
                              initialValue: staffInfo.workerCardNo1,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.num.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} autoComplete="off" />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate1', {
                              initialValue: staffInfo.workerCardExpiredDate1
                                ? moment(staffInfo.workerCardExpiredDate1)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationStaff.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('green_base64', {
                          initialValue: staffInfo.green_base64,
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            accept=".pdf,image/*"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            listType="picture"
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      {/* 工人注册卡 */}
                      <div className={`${Style.row} ${Style.rowTitle}`}>
                        <FormattedMessage id="applicationCommon.workerCard.registerCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName2', {
                              initialValue: staffInfo.workerCardName2,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo2'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo2', {
                              initialValue: staffInfo.workerCardNo2,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.num.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} autoComplete="off" />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate2', {
                              initialValue: staffInfo.workerCardExpiredDate2
                                ? moment(staffInfo.workerCardExpiredDate2)
                                : null,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo2'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationStaff.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('regist_base64', {
                          initialValue: staffInfo.regist_base64,
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            accept=".pdf,image/*"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            listType="picture"
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      <div className={`${Style.row}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.workType.name')}
                          >
                            {getFieldDecorator('workerCardWorkType2', {
                              initialValue: staffInfo.workerCardWorkType2,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo2'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.workType.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Select
                                showSearch
                                style={{ width: '100%' }}
                                optionFilterProp="children"
                                filterOption={(input, option) =>
                                  option.props.children
                                    .toLowerCase()
                                    .indexOf(input.toLowerCase()) >= 0
                                }
                                loading={workerType === null}
                                placeholder={formatMessage('baseInfo.placeholderChecked')}
                              >
                                {Array.isArray(workerType)
                                  ? workerType.map(item => (
                                    <Select.Option
                                      key={item.id}
                                      value={item.id}
                                    >{`${item.code} - ${item.nameZh}`}</Select.Option>
                                  ))
                                  : null}
                              </Select>,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      {/* 蓝卡 */}
                      <div className={`${Style.row} ${Style.rowTitle}`}>
                        <FormattedMessage id="applicationCommon.workerCard.blueCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName3', {
                              initialValue: staffInfo.workerCardName3,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo3'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo3', {
                              initialValue: staffInfo.workerCardNo3,
                            })(<Input maxLength={50} autoComplete="off" />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate3', {
                              initialValue: staffInfo.workerCardExpiredDate3
                                ? moment(staffInfo.workerCardExpiredDate3)
                                : null,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo3'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>
                      {/* 自定义 */}
                      <div className={`${Style.row} ${Style.rowTitle}`}>
                        <FormattedMessage id="applicationCommon.workerCard.customizeCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName4', {
                              initialValue: staffInfo.workerCardName4,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo4'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo4', {
                              initialValue: staffInfo.workerCardNo4,
                            })(<Input maxLength={50} autoComplete="off" />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate4', {
                              initialValue: staffInfo.workerCardExpiredDate4
                                ? moment(staffInfo.workerCardExpiredDate4)
                                : null,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo4'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>
                      {/* 自定义2 */}
                      <div className={`${Style.row} ${Style.rowTitle}`}>
                        <FormattedMessage id="applicationCommon.workerCard.customizeCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName5', {
                              initialValue: staffInfo.workerCardName5,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo5'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo5', {
                              initialValue: staffInfo.workerCardNo5,
                            })(<Input maxLength={50} autoComplete="off" />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate5', {
                              initialValue: staffInfo.workerCardExpiredDate5
                                ? moment(staffInfo.workerCardExpiredDate5)
                                : null,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo5'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>
                      {/* 疫苗日期 */}
                      <div className={`${Style.row} ${Style.rowTitle}`}>
                        <FormattedMessage id="applicationCommon.workerCard.vaccination_date" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date1')}
                          >
                            {getFieldDecorator('vaccination_date1', {
                              initialValue: staffInfo.vaccination_date1
                                ? moment(staffInfo.vaccination_date1)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date2')}
                          >
                            {getFieldDecorator('vaccination_date2', {
                              initialValue: staffInfo.vaccination_date2
                                ? moment(staffInfo.vaccination_date2)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={!form.getFieldValue('vaccination_date1')}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date3')}
                          >
                            {getFieldDecorator('vaccination_date3', {
                              initialValue: staffInfo.vaccination_date3
                                ? moment(staffInfo.vaccination_date3)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={
                                  !(
                                    form.getFieldValue('vaccination_date1') &&
                                    form.getFieldValue('vaccination_date2')
                                  )
                                }
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={`${Style.row} ${Style.column3}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date4')}
                          >
                            {getFieldDecorator('vaccination_date4', {
                              initialValue: staffInfo.vaccination_date4
                                ? moment(staffInfo.vaccination_date4)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={
                                  !(
                                    form.getFieldValue('vaccination_date1') &&
                                    form.getFieldValue('vaccination_date2') &&
                                    form.getFieldValue('vaccination_date3')
                                  )
                                }
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date5')}
                          >
                            {getFieldDecorator('vaccination_date5', {
                              initialValue: staffInfo.vaccination_date5
                                ? moment(staffInfo.vaccination_date5)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={
                                  !(
                                    form.getFieldValue('vaccination_date1') &&
                                    form.getFieldValue('vaccination_date2') &&
                                    form.getFieldValue('vaccination_date3') &&
                                    form.getFieldValue('vaccination_date4')
                                  )
                                }
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationStaff.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('vacc_base64', {
                          initialValue: staffInfo.vacc_base64,
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            accept=".pdf,image/*"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            listType="picture"
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.include" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div style={{ display: 'flex' }}>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.include')}
                          >
                            {getFieldDecorator('isInfected', {
                              initialValue: staffInfo.isInfected === 2,
                              // initialValue: contractorInfo.isBlack === 2,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Checkbox
                                checked={form.getFieldValue('isInfected')}
                                name="isInfected"
                              ></Checkbox>,
                            )}
                          </Form.Item>
                          <Form.Item
                            label=""
                          >
                            {getFieldDecorator('inspection_exemption_time', {
                              initialValue: staffInfo.inspection_exemption_time
                                ? moment(staffInfo.inspection_exemption_time)
                                : null,
                              rules: [
                                {
                                  required: form.getFieldValue('isInfected'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={!form.getFieldValue('isInfected')}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationStaff.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('exemption_base64', {
                          initialValue: staffInfo.exemption_base64,
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            accept=".pdf,image/*"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            listType="picture"
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      <div className={`${Style.row} ${Style.rowTitle}`}>
                        <FormattedMessage id="applicationCommon.workerCard.blacklist" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.isblacklist')}
                          >
                            {getFieldDecorator('isBlack', {
                              initialValue: staffInfo.isBlack === 2,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Checkbox
                                checked={form.getFieldValue('isBlack')}
                                name="isBlack"
                              ></Checkbox>,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={`${Style.row} ${Style.rowTitle}`}>
                        <FormattedMessage id="applicationContractor.temporary.email" />
                      </div>
                      <div className={`${Style.row}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.temporary.email')}
                          >
                            {getFieldDecorator('email', {
                              initialValue: staffInfo.email,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationContractor.temporary.errMessage.email',
                                  ),
                                },
                              ],
                            })(<Input maxLength={255} />)}
                          </Form.Item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className={Style.partone}>
                <div className={Style.main}>
                  <div className={Style.detailWrapper}>
                    <div className={Style.table}>
                      <div className={`${Style.row}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.readerCard.passno')}
                          >
                            {getFieldDecorator('newcardNo', {
                              initialValue: staffInfo.card_no,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} />)}
                          </Form.Item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className={Style.part}>
                <div className={Style.title}>
                  <strong>{formatMessage('baseInfo.approvehistory')}</strong>
                </div>
                <div className={Style.main}>
                  <div className={Style.detailWrapper}>
                    <Table
                      loading={!!saveLoading}
                      rowKey="id"
                      columns={this.renderColumns()}
                      pagination={false}
                      dataSource={staffInfo?.contractor_approve_operates}
                    />
                  </div>
                </div>
              </div>
              <div className={Style.bottom}>
                <Button htmlType="button" onClick={this.handleReset}>
                  {formatMessage('button.reset')}
                </Button>
                <Button type="primary" htmlType="submit">
                  {formatMessage('button.save')}
                </Button>
              </div>
            </Form>
          </div>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default Index;
